<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="utf-8" />
    <script src="scripts/vue.js"></script>
    <script src="scripts/vuetify/vuetify.js"></script>
    <link href="scripts/vuetify/vuetify.css" rel="stylesheet">
    <link href="scripts/materialdesignicons/css/materialdesignicons.css" rel="stylesheet">
    <title>答题助手</title>
    <style>
        bm {
            color: #2196F3;
            font-weight: bold;
        }

        em {
            color: #F44336;
            font-weight: bold;
            font-style: normal;
        }

        cm {
            background-color: #F44336;
            font-weight: bold;
            color: #fff;
        }

        #title b {
            background-color: #333;
            color: #fff;
        }
        .v-chip{
            min-width: 40px;
        }
    </style>
</head>

<body>
    <v-app id="app">
        <v-content>
            <v-container fluid>
                <v-row dense>
                    <v-col cols="12">
                        <!--工具栏-->
                        <v-row dense align="center">
                            <v-col>
                                <v-select hide-details :disabled="isStart" v-model="app" :items="appItems" label="直播频道">
                                </v-select>
                            </v-col>
                            <v-col>
                                <v-switch hide-details :disabled="!app" v-model="isStart" label="运行" @change="toogleRun">
                                </v-switch>
                            </v-col>
                            <v-col><span class="red--text">{{errMessage}}</span></v-col>
                            <v-col>
                                <v-text-field dense label="magi" solo hide-details @keyup.enter="setMagiCookie()" v-model="magiCookie"></v-text-field>
                            </v-col>
                            <v-col><v-select hide-details @change="runTest" :items="testItems" label="测试"></v-select><input ref="copy" type="text" style="width: 1px;height:1px;" /></v-col>
                        </v-row>
                        <!--题目-->
                        <v-row dense>
                            <v-col>
                                <v-card dense outlined>
                                    <v-card-title class="py-0">
                                        <v-row>
                                            <v-col cols="9"><span @contextmenu="rightSearch($event)" id="title" v-html="formatTitle"></span></v-col>
                                            <v-col style="display: none;" cols="1"><v-btn @click="xiaoYuan">小猿</v-btn></v-col>
                                            <v-col cols="1"><v-btn @click="dumpQuestion">dump</v-btn></v-col>
                                            <v-col cols="2">
                                                <v-text-field dense label="search" solo hide-details @keyup.enter="search()" v-model="searchWord" @click:append-outer="searchWithTitle()" append-outer-icon="mdi-plus"></v-text-field>
                                            </v-col>
                                        </v-row>
                                    </v-card-title>
                                </v-card>
                            </v-col>
                        </v-row>
                        <!--题目分词-->
                        <v-row dense>
                            <v-col>
                                <v-chip dense class="mx-2" label @click="search(word)" v-for="(word,i) in question.titleWords" :key="i">{{word}}</v-chip>
                            </v-col>
                        </v-row>
                        <!--个性题答案-->
                        <v-row dense>
                            <v-col v-for="(optionGroup,i) in question.randomOptions" :key="i">
                                <v-row dense :class="[optionGroup.length >1 ? 'orange' : 'red']" v-for="(options,index) in optionGroup" :key="index">
                                    <v-col>
                                        <v-list dense>
                                            <template v-for="(option, oi) in options">
                                                <v-list-item :key="oi" dense>
                                                    <v-list-item-content>
                                                        <v-list-item-title>
                                                            <v-chip label outlined color="red">{{ option.pMatch }}</v-chip>
                                                            <v-chip label outlined >{{ option.fMatch }}</v-chip>
                                                            <v-chip dense label color="white">{{ option.text }}</v-chip>
                                                        </v-list-item-title>
                                                    </v-list-item-content>
                                                </v-list-item>
                                            </template>
                                        </v-list>
                                    </v-col>
                                </v-row>
                            </v-col>


                        </v-row>
                        <!--选项-->
                        <v-row dense>
                            <!--选项-->
                            <v-col cols="5">
                                <v-card dense outlined>
                                    <v-list dense>
                                        <template v-for="(option, index) in question.options">
                                            <v-list-item :key="index" dense>
                                                <v-list-item-content>
                                                    <v-list-item-title>
                                                        <v-chip dense label outlined :color="option.pMatch>0?'red':'white'">{{ option.pMatch }}</v-chip>
                                                        <v-chip dense label outlined :color="option.fMatch>0?'black':'white'">{{ option.fMatch }}</v-chip>
                                                        <v-chip dense label @click="submitAnswer(index+1,$event)" :dark="option.isAnswer"
                                                                :color="option.isAnswer?'red':'white'">{{ option.text }}</v-chip>
                                                    </v-list-item-title>
                                                </v-list-item-content>
                                            </v-list-item>
                                            <v-divider v-if="index !== question.options.length-1">
                                            </v-divider>
                                        </template>
                                    </v-list>
                                </v-card>
                            </v-col>
                            <!--选项分词-->
                            <v-col cols="7">
                                <v-card dense outlined>
                                    <v-list dense>
                                        <template v-for="(option, index) in question.options">
                                            <v-list-item :key="index" dense>
                                                <v-list-item-content>
                                                    <v-list-item-title>
                                                        <v-chip large @click="searchByOption(word)" v-for="(v,word) in option.words" :key="v">{{word}}</v-chip>
                                                    </v-list-item-title>
                                                </v-list-item-content>
                                            </v-list-item>
                                            <v-divider v-if="index !== question.options.length-1">
                                            </v-divider>
                                        </template>
                                    </v-list>
                                </v-card>
                            </v-col>
                        </v-row>
                        <!--搜索匹配-->
                        <v-row dense>
                            <v-col>
                                <v-card dense outlined>
                                    <v-list dense>
                                        <template v-for="(content, index) in question.contents">
                                            <v-list-item :key="index">
                                                <v-list-item-content v-html="'<span>' + content + '</span>'">
                                                </v-list-item-content>
                                            </v-list-item>
                                            <v-divider v-if="index !== question.contents.length-1"></v-divider>
                                        </template>
                                    </v-list>
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-col>
                </v-row>

            </v-container>
        </v-content>

    </v-app>

    <script>

        var app = new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: function () {
                return {
                    appItems: [{ text: '小红书', value: 'xiaohongshu' },{ text: '微视', value: 'weishi' }],
                    testItems: [{text:'null',value:''},{ text: 'start-uiautomator', value: 'start-uiautomator' },{ text: 'get-hierarchy', value: 'get-hierarchy' }],
                    isStart: false,
                    errMessage: '',
                    question: {
                        title: '没有题目',
                        round: 0,
                        options: [],
                        contents: [],
                        randomOptions:[],
                        imgSrc:'',
                        titleWords:{}
                    },
                    app: '',
                    socket: null,
                    searchWord:'',
                    magiCookie:'',
                    baiduToken:''
                }
            },
            computed: {
                formatTitle() {
                    return `${this.question.round}：`+this.question.title.replace(/不|非|否|没/g, (str) => {
                        return `<b>${str}</b>`;
                    });
                }
            },
            methods: {
                toogleRun() {
                    if (this.isStart) {
                        this.socket.send(JSON.stringify({ act: 'start', app: this.app }));
                    } else {
                        this.socket.send(JSON.stringify({ act: 'stop', app: this.app }));
                        this.question.round = 0;
                    }
                },
                newQuestion(data) {
                    if (this.question.round < data.round) {
                        this.question.title = data.title;
                        this.question.contents = [];
                        this.question.titleWords=[];
                        this.question.round = data.round;
                        this.question.randomOptions=[];
                        this.question.imgSrc='';
                        this.question.options = data.options.map((opt) => ({
                            pMatch: 0, fMatch: 0, text: opt.text, words:[],isAnswer:false
                        }));
                        //this.question.options = data.options;
                        if(data.result){
                            this.newAnswer(data);
                        }
                    }
                },
                newAnswer(data) {
                    if (this.question.round <= data.round) {
                        data.result.split('或').forEach((res)=>{
                            this.question.options.forEach((o) => {
                                if (res === o.text) {
                                    o.isAnswer=true;
                                }
                            });
                        });
                    }
                },
                newContent(data) {
                    if (data.round >= this.question.round) {
                        if (data.content.length > this.question.contents.length)
                            this.question.contents = data.content;
                        this.question.options.forEach((o) => {
                            if (data.matches[o.text]) {
                                o.pMatch = data.matches[o.text].pMatch;
                                o.fMatch = data.matches[o.text].fMatch;
                            }
                        });
                    }
                },
                addContent(data) {
                    if (data.round === this.question.round) {
                        this.question.contents.unshift(...data.content);
                        this.question.options.forEach((o) => {
                            if (data.matches[o.text]) {
                                o.pMatch += data.matches[o.text].pMatch;
                                o.fMatch += data.matches[o.text].fMatch;
                            }
                        });
                    }
                },
                newTitleWord(data){
                    if(data.round>=this.question.round){
                        arr=[];
                        for(let word in data.data){
                            arr.push(word);
                        }
                        arr.sort((a,b)=>b.length - a.length);
                        this.question.titleWords = arr;
                    }
                },
                newRandomOptions(data) {
                    if(data.round>=this.question.round) {
                        result=[];
                        for(let group of data.data){
                            let randomGroup = [];
                            for(let options of group){
                                let randomOptions = [];
                                for(let option of options){
                                    let opt={text:option,pMatch:0,fMatch:0};
                                    for(let qopt of this.question.options){
                                        if(qopt.text===option){
                                            opt=qopt;
                                            break;
                                        }
                                    }
                                    randomOptions.push(opt);
                                }
                                randomGroup.push(randomOptions);
                            }
                            result.push(randomGroup);
                        }
                        this.question.randomOptions = result;
                    }
                },
                rightSearch(e){
                    e.preventDefault();
                    this.search(window.getSelection().toString());
                },
                search(word){
                    this.socket.send(JSON.stringify({ act: 'search', data: word || this.searchWord ,round:this.question.round }));
                },
                searchWithTitle(word){
                    word = word || this.searchWord;
                    console.log(word,word.split(' '));
                    if(word){
                        word.split(' ').forEach((w)=>{
                            this.socket.send(JSON.stringify({ act: 'search', data: w + this.question.title ,round:this.question.round }));
                        });
                    }
                },
                runTest(val){
                    if(val)
                        this.socket.send(JSON.stringify({ act: 'test', data: val}));
                },
                setMagiCookie(){
                    localStorage.setItem("magiCookie",this.magiCookie);
                    this.socket.send(JSON.stringify({ act: 'magiCookie', data: this.magiCookie }));
                },
                setBaiduToken(){
                    if(this.baiduToken)
                        this.socket.send(JSON.stringify({ act: 'baiduToken', data: this.baiduToken }));
                    else{
                        this.socket.send(JSON.stringify({ act: 'createBaiduToken' }));
                    }
                },
                newBaiduToken(token){
                    this.baiduToken = token;
                    localStorage.setItem('baiduToken',token);
                },
                xiaoYuan(){
                    this.socket.send(JSON.stringify({ act: 'xiaoYuan' }));
                },
                dumpQuestion(){
                    this.socket.send(JSON.stringify({ act: 'dumpQuestion',data:this.app }));
                },
                submitAnswer(index,el){
                    if(this.app==='douyin') {
                        this.socket.send(JSON.stringify({act: 'submitAnswer', data: index + ''}));
                        if(this.question.round===6){
                            this.question.round = 0;
                            setTimeout(()=>{
                                this.socket.send(JSON.stringify({ act: 'stop', app: this.app }));
                                setTimeout(()=>{this.socket.send(JSON.stringify({ act: 'start', app: this.app }));},1000);
                            },10000);

                        }
                    }
                    else if(this.app==='weishi'){
                        this.$refs.copy.value='选择：'+this.question.options[index-1].text;
                        this.$refs.copy.select();
                        document.execCommand("copy");
                        //console.log(this.$refs.copy);
                        //this.socket.send(JSON.stringify({ act: 'submitAnswer',data:index-1+'' }));
                    }

                }
            },
            created: function () {
                this.magiCookie=localStorage.getItem("magiCookie");
                this.baiduToken=localStorage.getItem("baiduToken");

                this.socket = new WebSocket("ws://127.0.0.1:8818/answer");
                this.socket.onopen = () => {
                    this.setMagiCookie();
                    this.setBaiduToken();
                };
                this.socket.onmessage = (e) => {
                    let data = JSON.parse(e.data);
                    if (data.success) {
                        switch (data.act) {
                            case 'NewQuestion': this.newQuestion(data.data); break;
                            case 'NewAnswer': this.newAnswer(data.data); break;
                            case 'WordTitle': this.newTitleWord(data); break;
                            case 'Count': this.counter(data); break;
                            case 'Content': this.newContent(data.data); break;
                            case 'Random': this.newRandomOptions(data); break;
                            case 'SearchContent': this.addContent(data.data); break;
                            case 'NewBaiduToken': this.newBaiduToken(data.data); break;
                        }
                    } else {
                        this.errMessage = data.message;
                        console.error(data.message);
                    }
                };
                this.socket.onerror = (e) => {
                    this.errMessage = '服务器连接失败';
                };
                this.socket.onclose = () => {
                    this.errMessage = '服务器已关闭';
                };
            }
        })
    </script>
</body>

</html>